<section>
	<h1>Easy does it</h1>

	<p>You can use an easing function to make the transformation seem more natural. For convenience, <code>ramjet.linear</code> (the default), <code>ramjet.easeIn</code>, <code>ramjet.easeOut</code> and <code>ramjet.easeInOut</code> are included, but you can use any function that takes in input between 0 and 1 and returns a similar value, such as <a href='http://robertpenner.com/easing/'>Robert Penner's easing equations</a> (included here via Matt DesLauriers' <a href='https://www.npmjs.com/package/eases'>eases</a> package).</p>

	<p>In supported browsers, ramjet uses CSS animations to make the transformation buttery smooth, even on mobile. It precalculates keyframes so that you can use any timing function you like, not just the limited ones built in to CSS. (When transforming to or from SVG elements, ramjet falls back to timer-based animations, as SVG elements cannot be transformed with CSS. This may cause stutter on mobile devices.)</p>

	<pre><code>var eases = require('eases');

ramjet.transform({{from}}, {{to}}, {
  easing: eases.{{easing}},
  duration: {{duration}}
});</code></pre>

	<div class='controls'>
		<select value='{{easing}}'>
			{{#each easingFunctions}}
				<option>{{this}}</option>
			{{/each}}
		</select>

		<label>
			<input type='range' value='{{duration}}' min='0' max='2000'>
			{{duration}}ms
		</label>
	</div>

	<div class='demo' on-tap='start'>
		<div class='a'><span>a</span></div>
		<div class='b hidden'><span>b</span></div>

		<StartButton duration='{{duration}}' paused='{{!transitioning}}'/>
	</div>
</section>

<style>
	.controls {
		margin: 0 0 1em 0;
	}
</style>

<script>
	const ramjet = require( './ramjet' );
	const tap = require( 'ractive-events-tap' );
	const eases = require( 'eases' );

	const addClass = require( './addClass' );
	const removeClass = require( './removeClass' );

	component.exports = {
		data: () => ({
			easingFunctions: Object.keys( eases ),
			easing: 'elasticOut',
			duration: 800,
			reverse: false
		}),

		computed: {
			from: '${reverse} ? "b" : "a"',
			to: '${reverse} ? "a" : "b"'
		},

		onrender: function () {
			const a = this.find( '.a' );
			const b = this.find( '.b' );

			this.on( 'start', () => {
				if ( this.get( 'transitioning' ) ) return;

				this.set( 'transitioning', true );

				const reverse = this.get( 'reverse' );

				const from = reverse ? b : a;
				const to = reverse ? a : b;

				removeClass( from, 'hidden' );
				removeClass( to, 'hidden' );

				ramjet.transform( from, to, {
					easing: eases[ this.get( 'easing' ) ],
					duration: this.get( 'duration' ),
					done: () => {
						this.set( 'transitioning', false );

						removeClass( to, 'hidden' );
						this.toggle( 'reverse' );
					}
				});

				addClass( from, 'hidden' );
				addClass( to, 'hidden' );
			});
		},

		events: {
			tap
		}
	};
</script>